【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻
こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。
アジェンダ
- Emmetとは？
- 誰が開発してるの？
- Emmetプラグインのインストール！
- インストール後の設定
- どんな感じがさわってみる。
- おまけ
Emmetとは？
はじめて「Emmet」を聞いた方は「Emmetってなに？」となるかと思いますので、簡単にご説明をできればと思います。
それでは、「Zen Coding」はどこかでお聞きしたことがあるのではないでしょうか？
「Zen Coding」は、コード(スニペット)とショートカットを組み合わせて、効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツールで認知度も高いと思います。
その「Zen Coding」が名前を変えて＆進化して 「Emmet」となって開発が進んでいるとのことです。
以下引用
Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:
誰が開発してくれているの？
Zen Codingの次期バージョンとのこともあって、これからもお世話になるかと思うので、感謝と敬意をこめて開発してくれている方をご紹介します。
Sergey Chikuyonok氏
現在はまだベータ版とのことで、正式リリースされたあかつきには、お礼のコメントをかければと思ってます。
使ってるなら今書けよ！と言われるかもしれないのですが、シャイなもので・・・。
Emmetプラグインのインストール！
Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます
ショートカットは「Ctrl+Shift+p」です。
その後、「Package Control:Install Pacage」を選択します。
Emmetと入力すると該当するプラグインが出てくるので、選択してインストールします。
これでインスールは完了、簡単でいいですね！
Sublime Text 2 関連情報は合わせてをこちらもどうぞ！
【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】
インストール後の設定
インストール後、注意したほうがいい箇所があるとのことだったのでこちらにまとめます。
- Zen Codingプラグインと併用しないようにする。
- Tabキーでのコード展開をしないようにする。
- 日本語文字変換を確定すると文字が消えるのを回避
Zen Codingプラグインと併用しないようにする。
Zen Codingプラグインを併用すると誤動作があるとのことで、Emmetを使う際はアンインストールしてください。
アンインストール方法
「Ctrl+Shift+p」から「Package Control:Remove Pacage」を選択します。
その後「Zen Coding」を選択して、アンインストールの完了です。これまた簡単！
Tab でのコード展開をしないようにする。
コード展開コマンドは、デフォルトでTabキーとCtrl+eが設定されています。
ここで注意したいのが、Tabキーなのですが、他の動作を上がいてしまうとのことでTabキーでの展開を停止したほうがいいかと思います。
Tabキー展開の停止方法
メニューの「Preferences > Settings – User」を選択し以下記述を追記します。
//[Emmet]Tabキー展開の停止 "disable_tab_abbreviations": true
日本語文字変換を確定すると文字が消えるのを回避
コーディング中、日本語文字変換後に確定すると文字が消えてしまいます!!!ちょっとこれは致命的？かと思いますが、ご安心ください。 以下、設定で回避できるそうです。
設定方法
メニューの「Preferences > Settings – User」を選択し以下記述を追記します。
//[Emmet]日本語変換確定の文字消えを防ぐ "disable_formatted_linebreak": true
どんな感じがさわってみる。
今回はさわりとして、CSSの展開をご紹介。
//展開前
.box
{
m10 /*ここで<Ctrl>+<e>*/
m10-20 /*ここで<Ctrl>+<e>*/
m0-a /*ここで<Ctrl>+<e>*/
}
//展開後
.box
{
margin: 10px;
margin: 10px 20px;
margin: 0 auto;
}
おお、これだけでも気持ちいですね！
//展開前
.box
{
w100 /*ここで<Ctrl>+<e>*/
w100e /*ここで<Ctrl>+<e>*/
w100p /*ここで<Ctrl>+<e>*/
}
//展開後
.box
{
width: 100px;
width: 100em;
width: 100%;
}
ベンダープレフィックスにも対応
//展開前
.box
{
/*box-shadow*/
-bsha-0-1-3-#bbb /*ここで<Ctrl>+<e>*/
/*text-shadow*/
-tsh-inset-0-1-3-#bbb /*ここで<Ctrl>+<e>*/
/*border-radius*/
-bdrs3 /*ここで<Ctrl>+<e>*/
}
//展開後
.box
{
/*box-shadow*/
-webkit-box-shadow: -0px 1px 3px #bbb;
-moz-box-shadow: -0px 1px 3px #bbb;
box-shadow: -0px 1px 3px #bbb;
/*text-shadow*/
-webkit-text-shadow: -1px 1px 0 #033070;
-moz-text-shadow: -1px 1px 0 #033070;
-ms-text-shadow: -1px 1px 0 #033070;
-o-text-shadow: -1px 1px 0 #033070;
text-shadow: -1px 1px 0 #033070;
/*border-radius*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
こちらのサイトにCSSのショートコードがまとめて頂いています。ありがたいです。
CSSの記述を高速化する、Emmet (Zen-Coding)
おまけ
いろいろとEmmetの情報を探っていく中、自分は「Zen Coding」の 「Wrap変換（Wrap with Abbreviation）」が結構気に入っている機能なのですが、最初ショートカットがわからず、、、調べた結果Ctrl+Alt+Enterで動作してくれるとのことでした。
ですが、、、自分的にはショートカットにEnterキーがあるとむず痒かったので「Zen Coding」と同じ「Ctrl+Shift+A」に変更しました。
変更方法は、メニューのPrerences > KeybiDefaultgs - Userから変更できます。
[
//{ "keys": [ショートカットキー], "command": "コマンド名" }
{ "keys": ["ctrl+shift+a"], "command": "expand_as_you_type" }
]
余談ですが、コマンド名:expand_as_you_typeを探るのが大変でしたｗ
下巻では、もう少し詳しいEmmet関連の内容を書かせていただければと思います。
